import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import MainLayout from '../views/MainLayout.vue'
import { ElMessage } from 'element-plus'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  // 添加访客专用路由
  {
    path: '/visitor-register',
    name: 'visitorRegister',
    component: () => import('../views/Visitor.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    component: MainLayout,
    meta: { requiresAuth: true, role: 'admin' },
    children: [
      {
        path: 'dashboard',
        name: 'adminDashboard',
        component: () => import('../views/admin/Dashboard.vue')
      },
      {
        path: 'user-mgmt',
        component: () => import('../views/admin/UserMgmt.vue'),
        meta: { requiresAuth: true, role: 'admin' }
      },
      {
        path: 'parking-mgmt',
        component: () => import('../views/admin/ParkingMgmt.vue'),
        meta: { requiresAuth: true, role: 'admin' }
      },
      {
        path: 'visitor-approval',
        component: () => import('../views/admin/VisitorApproval.vue'),
        meta: { requiresAuth: true, role: 'admin' }
      },
      {
        path: 'fee-mgmt',
        name: 'FeeMgmt',
        component: () => import('../views/admin/FeeMgmt.vue'),
        meta: { requiresAuth: true, role: 'admin' }
      },
      {
        path: 'repair-mgmt',
        component: () => import('../views/admin/RepairMgmt.vue'),
        meta: { requiresAuth: true, role: 'admin' }
      },
      {
        path: 'profile',
        name: 'adminProfile',
        component: () => import('../views/Profile.vue'),
        meta: { requiresAuth: true }
      }
    ]
  },
  {
    path: '/main',
    name: 'main',
    component: MainLayout,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('../views/Dashboard.vue')
      },
      {
        path: 'shopping',
        component: () => import('../views/Shopping.vue'),
        meta: { requiresAuth: true, role: 'resident' }
      },
      {
        path: 'parking',
        component: () => import('../views/Parking.vue'),
        meta: { requiresAuth: true, role: 'resident' }
      },
      {
        path: 'visitor',
        component: () => import('../views/Visitor.vue'),
        meta: { requiresAuth: true, role: 'resident' }
      },
      {
        path: 'property',
        component: () => import('../views/Property.vue'),
        meta: { requiresAuth: true, role: 'resident' }
      },
      {
        path: 'repair',
        component: () => import('../views/Repair.vue'),
        meta: { requiresAuth: true, role: 'resident' }
      },
      {
        path: 'profile',
        name: 'userProfile',
        component: () => import('../views/Profile.vue'),
        meta: { requiresAuth: true }
      }
    ]
  }, // 这里添加逗号
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

// 修改路由守卫
router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('role')
  
  // 如果是访问登录页或访客登记页，直接放行
  if (to.path === '/login' || to.path === '/visitor-register') {
    next()
    return
  }
  
  // 检查是否已登录
  if (!role) {
    next('/login')
    return
  }
  
  // 根据角色控制路由访问
  if (role === 'admin') {
    // 如果是管理员，访问 /main 开头的路由时重定向到 /admin
    if (to.path.startsWith('/main')) {
      next('/admin' + to.path.slice(5))
      return
    }
  } else {
    // 如果是普通用户，访问 /admin 开头的路由时重定向到 /main
    if (to.path.startsWith('/admin')) {
      next('/main' + to.path.slice(6))
      return
    }
  }
  next()
})

export default router